<style type="text/css">
    html {
        height: 100%;
        text-align: center;
        vertical-align: middle;
    }

    body {
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    header {
        flex: 0 0 auto;
        display: inline;
        background-color: #8b572a;
    }

    .container {
        flex: 1 0 auto;
    }

    /* 撑满页面 */
    footer {
        flex: 0 0 auto;
        display: inline;
        background-color: #5a862d;
    }
</style>
<header><p>HEADER</p></header>
<div class="container"></div>
<footer><p>FOOTER</p></footer>